<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
    <title>微笑计划后台--登录</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/plugins.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/authentication/form-1.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/assets/css/forms/theme-checkbox-radio.css}" rel="stylesheet" type="text/css" >
    <link th:href="@{/assets/css/forms/switches.css}" rel="stylesheet" type="text/css" >
    <link th:href="@{/plugins/notification/snackbar/snackbar.min.css}" rel="stylesheet" type="text/css" />
    <style>
        body {
            height: 100%;
            overflow: auto;
            margin: 0;
            padding: 0;
            background: #fff;
            background-image: url('/static/assets/img/login_bg.png');
            /* background-size: 100%; */
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }
        .login_h1 {
            margin-bottom: 50px;
            text-align: center;
        }

        .login_btn {
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body class="form" >
    <div class="form-container" style="justify-content: flex-end;">
        <div class="form-form">
            <div class="form-form-wrap">
                <div class="form-container">
                    <div class="form-content" style="justify-content: center;">
                        <h1 class="login_h1">登录</h1>
                        <form class="text-left" id="form1" onsubmit="return false" action="##" method="post">
                            <div class="form">
                                <div id="username-field" class="field-wrapper input">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-user">
                                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="12" cy="7" r="4"></circle>
                                    </svg>
                                    <input id="username" name="username" type="text" class="form-control"
                                        placeholder="请输入账号">
                                </div>

                                <div id="password-field" class="field-wrapper input mb-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round" class="feather feather-lock">
                                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                    </svg>
                                    <input id="password" name="password" type="password" class="form-control"
                                        placeholder="请输入密码">
                                </div>
                                <div class="d-sm-flex justify-content-between">
                                    <div class="field-wrapper toggle-pass">
                                        <p class="d-inline-block">显示密码</p>
                                        <label class="switch s-primary">
                                            <input type="checkbox" id="toggle-password" class="d-none">
                                            <span class="slider round"></span>
                                        </label>
                                    </div>
                                    <div class="field-wrapper login_btn">
                                        <button type="submit" class="btn btn-primary" value="" onclick="login()">登录</button>
                                    </div>

                                </div>

                                <div class="field-wrapper text-center keep-logged-in">
                                    <div class="n-chk new-checkbox checkbox-outline-primary">
                                        <label class="new-control new-checkbox checkbox-outline-primary">
                                            <input type="checkbox" class="new-control-input">
                                            <span class="new-control-indicator"></span>保持登录状态
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
    <script th:src="@{/assets/js/libs/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/bootstrap/js/popper.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/authentication/form-1.js}"></script>
    <script th:src="@{/plugins/notification/snackbar/snackbar.min.js}"></script>


<script>
    function login() {
        var username = $("#username").val();
        var password = $("#password").val();
        if (username ==""){
            Snackbar.show({
                text: '请输入账号',
                pos: 'top-right'
            });
            return false;
        }
        if (password == ""){
            Snackbar.show({
                text: '请输入密码',
                pos: 'top-right'
            });
            return false;
        }
        $.ajax({
            type: "POST",//方法类型
            url: "/admin/login" ,//url
            data: $('#form1').serialize(),
            success: function (result) {
                if(result.code == "500"){
                    Snackbar.show({
                        text: result.msg,
                        pos: 'top-right'
                    });
                }else if(result.code == "200"){
                    Snackbar.show({
                        text: "登录成功",
                        pos: 'top-right'
                    });
                    window.location.href="/admin";
                }
            },
            error : function() {
                Snackbar.show({
                    text: '请稍后再试',
                    pos: 'top-right'
                });
            }
        });
    }
</script>

</body>

</html>
